<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算器</title>
  <style>
    input {
      vertical-align: middle;
    }
  </style>
</head>

<body>
    <input type="text" id="num1">
    <select name="" id="operator">
      <option>请选择</option>
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
    <input type="text" id="num2">
    <input type="button" value="=">
    <input type="text" id="num3">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    let $num1 = $("#num1")
    let $num2 = $("#num2")
    let $num3 = $("#num3")
    let $opts = $("#operator option")
    let $btn = $("input:button")
    let result;
    let idx;
    $btn.click(function(){
      $opts.each(function(i){
        if ($opts[i].selected == true) {
          idx = i;
        }
      })
      switch(idx) {
        case 0 :
          alert("请选择运算符");
          break;
        case 1 :
          result = parseFloat($num1.val()) + parseFloat($num2.val());
          break;
        case 2 :
          result = parseFloat($num1.val()) - parseFloat($num2.val());
          break;
        case 3 :
          result = parseFloat($num1.val()) * parseFloat($num2.val());
          break;
        case 4 :
          result = parseFloat($num1.val()) / parseFloat($num2.val());
          break;
      }
      $num3.val(result);
    })
  </script>
</body>

</html>